<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>收集表单数据</title>
  <script src="../js/vue.js"></script>
</head>
<body>
   <div id="root">
      <!-- (4) 表单正常提交会刷新页面，可以让form阻止刷新并执行相应页面 -->
      <form @submit.prevent="printInfo">
         <!-- (9) v-model.trim去掉前后空格(中间空格不会去掉) -->
         账号：<input type="text" v-model.trim="userInfo.account"> <br> <br>
         密码：<input type="password" v-model="userInfo.password"> <br> <br>
         <!-- (7) 如果是数值绑定，通常需要
                  type="number" v-model.number
                  前者是保证输入的值为数字，后者保证转换后的值为数值(v-model默认是会转换为字符串)
         -->
         年龄：<input type="number" v-model.number="userInfo.age"> <br> <br>
         性别：
         <!-- (1) radio 在双向绑定之后 需要给各个radio加个value值 -->
         男<input type="radio" name="sex" v-model="userInfo.sex" value="male">
         女<input type="radio" name="sex" v-model="userInfo.sex" value="female"> <br> <br>
         爱好：
         <!-- (2) 多选框的v-model默认绑定的是checked属性
                  因为checkbox的value的默认值就是是否被选中
              (3) 如果想要收集选中的对应数据值那就得给每一个checkbox设置value值
                  然后再用v-model绑定到同一个数组中
                  因为 多选框的值不止一个，因此要用数组存放
                  而v-model只能写一个变量，因此填入数组名
                  接下来数组中各个值就由各个checkbox绑定时指定即可 
               -->
         学习<input type="checkbox" v-model="userInfo.hobby" value="study">
         听歌<input type="checkbox" v-model="userInfo.hobby" value="listen">
         唱歌<input type="checkbox" v-model="userInfo.hobby" value="sing"> <br> <br>
         所属校区：
         <select v-model="userInfo.section">
            <option value="">请选择</option>
            <option value="smoke">抽烟</option>
            <option value="drink">喝酒</option>
            <option value="perm">烫头</option>
         </select> <br> <br>
         <!-- (8) v-model.lazy只有当前input失去焦点时才会双向绑定对应的值
                  挤牙膏一样，很懒
         -->
         其他信息：<textarea v-model.lazy="userInfo.other"></textarea> <br> <br>
         <input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="https://www.baidu.com">《用户协议》</a> <br> <br>
         <!-- (5) 在form里面的button是默认type为submit -->
         <button>提交</button>
      </form>
   </div>

   <script type='text/javascript'>
      new Vue({
          el:'#root',
          data:{
            // (6) data里面的数据注意归类，比如这里要放在一个userInfo里面
             userInfo:{
               account: '',
               age:'',
               password: '',
               sex:'male',
               hobby:[],
               section:'抽烟',
               other:'',
               agree:''
             }
          },
          methods: {
             printInfo(){
                 console.log(this._data);
             }
          },
      })
   </script>
</body>
</html>